<template>
    <div class="cont">
        <nav-bar :title="type == 2 ? '关键词管理' : '官方关键词'"
            rightImg="https://h5.dhcc.wang/newprogram/wxRobot/nav_refresh_black.png" :bgStyle="bgStyle" text-color="#333333"
            :rotate.sync="reload" @leftClick="back" @rightClick="refresh" />
        <van-list v-if="list && list.length > 0" v-model="isUpLoading" :finished="finished" finished-text="没有更多了"
            @load="onLoadMore">
            <div v-for="(item, index) in list" :key="index" class="m-lr-12  m-t-10">
                <div class="bg-white  radius8 m-t-10">
                    <div class="p-tb-12 p-lr-12 van-hairline--bottom">
                        <span class="text-bold">关 键 词 ：</span>{{ item.title }}
                    </div>
                    <div v-if="item.reply_type == 1" class="p-tb-12 p-lr-12 flex align-start">
                        <span class="text-bold">回复内容：</span>
                        <img width="60" :src="item.reply" alt="" @click="preview(item.reply)">
                    </div>
                    <div class="overflowtext-box p-tb-12 p-lr-12" v-else>
                        <div class="overflowtext-wrap">
                            <div class="overflowtext-text" :class="item.isOpen ? 'more-text' : ''" :ref="`replys${index}`">
                                <span class="text-bold">回复内容：</span>
                                <span class="content" :ref="`contents${index}`">{{ item.reply
                                }}</span>

                            </div>
                            <van-icon class="open-close color-primary" v-if="item.openStatus"
                                :name="item.isOpen ? 'arrow-up' : 'arrow-down'" @click="lookMore(item, index)" />
                        </div>
                    </div>

                    <div class="flex align-center justify-between m-t-10 van-hairline--top p-tb-12 p-lr-12"
                        v-if="type == 2">
                        <div class="font-12 color-9">创建时间：{{ item.createtime | formateTime }}</div>
                        <div class="flex align-center">
                            <div class="flex align-center" @click="editKeyword(item, index)"><van-icon class="m-r-5"
                                    name="edit" />编辑
                            </div>
                            <div class="flex align-center m-l-20" @click="del(item, index)">
                                <van-icon class="m-r-5" name="delete-o" />删除
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- <div class="pad-lr pad-b bg-gray">
                <van-skeleton :loading="isLoadingSkeleton" avatar :row="4" v-for="i in 6" :key="i" />
            </div> -->
        </van-list>
        <noData v-else text="暂无关键词" />
        <!-- 添加、编辑关键词 -->
        <keywordAdd v-if="addShow" :popup-visible="addShow" :isNeed="true" :keywordData="keywordData"
            @close="keywordClose" />
    </div>
</template>

<script>
import { List, Icon, Dialog, ImagePreview } from 'vant'
import keywordAdd from '@/components/keywordAdd.vue'
export default {
    components: {
        keywordAdd,
        [List.name]: List,
        [Icon.name]: Icon,
        [Dialog.name]: Dialog
    },
    data() {
        return {
            bgStyle: '#fff',
            reload: false,
            list: [],
            isLoadingSkeleton: true,
            finished: false, // 控制在页面往下移动到底部时是否调用接口获取数据
            isUpLoading: false, // 上拉加载
            type: 1,
            page: 1,
            addShow: false,
            keywordData: {}
        }
    },
    mounted() {
        this.type = this.$route.query.type
        this.setHeader()
        this.getList()
    },
    methods: {
        getList() {
            this.$api.keywordList({ data_type: this.type, page: this.page, page_size: 20 }, true).then(async res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                let length1 = this.list.length
                let arr = this.$common.deepClone(this.list)
                this.list = [...this.list, ...res.data.list]
                this.isUpLoading = false
                this.page++
                if (this.list.length === res.data.total) {
                    this.finished = true
                }
                this.$nextTick(() => {
                    res.data.list.forEach((item, index) => {
                        item.isOpen = false
                        if (item.reply_type != 1) {
                            let indexs = this.list.length - res.data.list.length + index
                            let status = this.$refs[`replys${indexs}`][0].offsetHeight < this.$refs[`contents${indexs}`][0].offsetHeight
                            item.openStatus = status
                        }
                    })
                    this.list = [...arr, ...res.data.list]
                })
            }).finally(() => {
                setTimeout(() => {
                    this.reload = false
                }, 300)
            })
        },
        onLoadMore() {
            this.getList()
        },
        refresh() {
            this.reload = true
            this.page = 1
            this.list = []
            this.getList()
        },
        back() {
            this.$router.go(-1)
        },
        setHeader() {
            this.$common.setHeader({
                native_headershow: 0,
                topstyle: 'topcolor',
                native_top_words_color: '#ffffff',
                str_link_color: '#ffffff',
                end_link_color: '#ffffff'
            })
        },
        del(item, index) {
            Dialog.confirm({
                title: '温馨提示',
                message: '确定要删除该关键词回复吗？'
            })
                .then(() => {
                    this.$api.keywordDelete({ id: item.id }).then(res => {
                        if (res.code != 1) {
                            return this.$toast(res.msg)
                        }
                        this.$toast('删除成功')
                        this.list.splice(index, 1)
                    })
                })
                .catch(() => {
                    // on cancel
                })
        },
        // 编辑关键词
        editKeyword(item, index) {
            this.keywordData = item
            this.keywordData.index = index
            this.addShow = true
        },
        keywordClose(data) {
            if (data && data.id) {
                this.$set(this.list, this.keywordData.index, data)
            }

            this.addShow = false
        },
        // 图片预览
        preview(item) {
            ImagePreview([item])
        },
        lookMore(item, index) {
            item.isOpen = !item.isOpen
            this.$set(this.list, index, item)
            console.log(item.isOpen)
        }
    }
}
</script>
<style lang="less" scoped>
.cont {
    font-size: 14px;
    padding-top: 46px;

    .overflowtext-box {
        // overflow: hidden;
        line-height: 24px;

        .overflowtext-wrap {
            /**关键代码-解决高度设置为百分百失效的问题**/
            display: flex;
            position: relative;

            .overflowtext-text {
                /**默认显示两行文字并且文字截断**/
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                word-wrap: break-word;
                word-break: break-all;
                position: relative;
                margin-right: 10px;
            }

            .open-close {
                position: absolute;
                right: 0;
                bottom: 2px;
                font-size: 16px;
            }

            /**选中时：显示行数加大**/
            .more-text {
                -webkit-line-clamp: 9999;
                // max-height: none;
            }
        }
    }
}
</style>